<template>
  <div class="content">
    <h2>密码登录</h2>
    <div class="intbox">
      <input type="text" placeholder="手机/用户名"  v-model="i"/>
      <input type="password" placeholder="密码"  v-model="j"/>
      <button @click="btnClick()">登录</button>
    </div>
    <div class="text_info">
      <span>手机号登录</span>
      <span>忘记密码</span>
    </div>
    <div class="infot">
      <input type="checkbox" />
      <p>已阅读并同意<span>《用户服务协议》、《隐私政策》</span></p>
    </div>
  </div>
</template>

<script>
import { user_login } from "../api/api";
export default {
  data() {
    return {
      userlist: [],
    };
  },
  mounted() {
    // phone: "13611129070", pass: "1234"
    user_login({phone: "13611129070", pass: "1234" }).then((res) => {
        console.log(res.data);
        this.userlist = res.data
    });
  },
  methods: {
    btnClick() {
      console.log(this.userlist.code);
      if (this.userlist.code == 200) {
        alert("登录成功");
        this.$router.push("/index/home");
      } else {
        alert("登录账号或密码错误！");
      }
    },
  },
};
</script>

<style scoped>
.content {
  margin: 10vh auto;
  height: 80vh;
  width: 90vw;
  box-sizing: border-box;
  position: relative;
}
.content h2 {
  padding: 4vh 2vw;
}
.content .intbox {
  margin: 0 auto;
  height: 30vh;
  width: 90vw;
  text-align: center;
}
.content .text_info {
  height: 5vh;
  width: 90vw;
  display: flex;
  font-size: 18px;
  justify-content: space-between;
}
.content .text_info span {
  color: rgb(0, 183, 255);
}
.content .intbox input {
  box-sizing: border-box;
  width: 86vw;
  height: 6vh;
  line-height: 6vh;
  padding-left: 2vw;
  margin-top: 2vh;
  margin-bottom: 2vh;
  font-size: 18px;
  border: transparent;
  outline: none;
  background: transparent;
  border-bottom: 1px solid rgb(226, 226, 226);
}
.content .intbox button {
  width: 86vw;
  height: 6vh;
  margin-top: 2vh;
  line-height: 6vh;
  border-radius: 25px;
  background: gainsboro;
  border: transparent;
  font-size: 18px;
}
.content .infot {
  height: 3vh;
  line-height: 3vh;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
}
.content .infot input {
  height: 2vh;
  margin-right: 1vw;
  line-height: 2vh;
}
.content .infot span {
  color: rgb(0, 199, 243);
}
</style>